<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --background-color: #fff;
        --color: #000;
        background-color: var(--background-color);
        color: var(--color);
      }
      :root.dark {
        --background-color: #141414;
        --color: #ffffff;
      }
      ::view-transition-new(root),
      ::view-transition-old(root) {
        animation: none;
      }

      :root.dark {
        body {
          background-image: none !important;
          background-color: var(--gary-1);
        }
      }

      .theme-switch {
        --toggle-size: 12px;
        --container-width: 5.625em;
        --container-height: 2.5em;
        --container-radius: 6.25em;
        --container-light-bg: #3d7eae;
        --container-night-bg: #1d1f2c;
        --circle-container-diameter: 3.375em;
        --sun-moon-diameter: 2.125em;
        --sun-bg: #ecca2f;
        --moon-bg: #c4c9d1;
        --spot-color: #959db1;
        --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
        --stars-color: #fff;
        --clouds-color: #f3fdff;
        --back-clouds-color: #aacadf;
        --transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
        --circle-transition: 0.3s cubic-bezier(0, -0.02, 0.35, 1.17);
      }

      .theme-switch,
      .theme-switch *,
      .theme-switch *::before,
      .theme-switch *::after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: var(--toggle-size);
      }

      .theme-switch__container {
        width: var(--container-width);
        height: var(--container-height);
        background-color: var(--container-light-bg);
        border-radius: var(--container-radius);
        overflow: hidden;
        cursor: pointer;
        -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
        box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
        -webkit-transition: var(--transition);
        -o-transition: var(--transition);
        transition: var(--transition);
        position: relative;
      }

      .theme-switch__container::before {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
        box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
        border-radius: var(--container-radius);
      }

      .theme-switch__checkbox {
        display: none;
      }

      .theme-switch__circle-container {
        width: var(--circle-container-diameter);
        height: var(--circle-container-diameter);
        background-color: rgba(255, 255, 255, 0.1);
        position: absolute;
        left: var(--circle-container-offset);
        top: var(--circle-container-offset);
        border-radius: var(--container-radius);
        -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1),
          0 0 0 1.25em rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1),
          0 0 0 1.25em rgba(255, 255, 255, 0.1);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-transition: var(--circle-transition);
        -o-transition: var(--circle-transition);
        transition: var(--circle-transition);
        pointer-events: none;
      }

      .theme-switch__sun-moon-container {
        pointer-events: auto;
        position: relative;
        z-index: 2;
        width: var(--sun-moon-diameter);
        height: var(--sun-moon-diameter);
        margin: auto;
        border-radius: var(--container-radius);
        background-color: var(--sun-bg);
        -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
        box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
        -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
        filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
        overflow: hidden;
        -webkit-transition: var(--transition);
        -o-transition: var(--transition);
        transition: var(--transition);
      }

      .theme-switch__moon {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        width: 100%;
        height: 100%;
        background-color: var(--moon-bg);
        border-radius: inherit;
        -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
        box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
        -webkit-transition: var(--transition);
        -o-transition: var(--transition);
        transition: var(--transition);
        position: relative;
      }

      .theme-switch__spot {
        position: absolute;
        top: 0.75em;
        left: 0.312em;
        width: 0.75em;
        height: 0.75em;
        border-radius: var(--container-radius);
        background-color: var(--spot-color);
        -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
        box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
      }

      .theme-switch__spot:nth-of-type(2) {
        width: 0.375em;
        height: 0.375em;
        top: 0.937em;
        left: 1.375em;
      }

      .theme-switch__spot:nth-last-of-type(3) {
        width: 0.25em;
        height: 0.25em;
        top: 0.312em;
        left: 0.812em;
      }

      .theme-switch__clouds {
        width: 1.25em;
        height: 1.25em;
        background-color: var(--clouds-color);
        border-radius: var(--container-radius);
        position: absolute;
        bottom: -0.625em;
        left: 0.312em;
        -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color),
          0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color),
          2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color),
          3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color),
          4.125em -2.125em 0 0.437em var(--back-clouds-color);
        box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color),
          2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color),
          3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color),
          4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
        -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
        -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
        transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
      }

      .theme-switch__stars-container {
        position: absolute;
        color: var(--stars-color);
        top: -100%;
        left: 0.312em;
        width: 2.75em;
        height: auto;
        -webkit-transition: var(--transition);
        -o-transition: var(--transition);
        transition: var(--transition);
      }

      /* actions */

      .theme-switch__checkbox:checked + .theme-switch__container {
        background-color: var(--container-night-bg);
      }

      .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
        left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
      }

      .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
        left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
      }

      .theme-switch__circle-container:hover {
        left: calc(var(--circle-container-offset) + 0.187em);
      }

      .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
      }

      .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
        bottom: -4.062em;
      }

      .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    </style>
  </head>
  <body>
    <label class="theme-switch">
      <input type="checkbox" class="theme-switch__checkbox" id="btn" />
      <div class="theme-switch__container">
        <div class="theme-switch__clouds"></div>
        <div class="theme-switch__stars-container">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 55" fill="none">
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M135.831 3.00688C135.055 3.85027 134.111 4.29946 133 4.35447C134.111 4.40947 135.055 4.85867 135.831 5.71123C136.607 6.55462 136.996 7.56303 136.996 8.72727C136.996 7.95722 137.172 7.25134 137.525 6.59129C137.886 5.93124 138.372 5.39954 138.98 5.00535C139.598 4.60199 140.268 4.39114 141 4.35447C139.88 4.2903 138.936 3.85027 138.16 3.00688C137.384 2.16348 136.996 1.16425 136.996 0C136.996 1.16425 136.607 2.16348 135.831 3.00688ZM31 23.3545C32.1114 23.2995 33.0551 22.8503 33.8313 22.0069C34.6075 21.1635 34.9956 20.1642 34.9956 19C34.9956 20.1642 35.3837 21.1635 36.1599 22.0069C36.9361 22.8503 37.8798 23.2903 39 23.3545C38.2679 23.3911 37.5976 23.602 36.9802 24.0053C36.3716 24.3995 35.8864 24.9312 35.5248 25.5913C35.172 26.2513 34.9956 26.9572 34.9956 27.7273C34.9956 26.563 34.6075 25.5546 33.8313 24.7112C33.0551 23.8587 32.1114 23.4095 31 23.3545ZM0 36.3545C1.11136 36.2995 2.05513 35.8503 2.83131 35.0069C3.6075 34.1635 3.99559 33.1642 3.99559 32C3.99559 33.1642 4.38368 34.1635 5.15987 35.0069C5.93605 35.8503 6.87982 36.2903 8 36.3545C7.26792 36.3911 6.59757 36.602 5.98015 37.0053C5.37155 37.3995 4.88644 37.9312 4.52481 38.5913C4.172 39.2513 3.99559 39.9572 3.99559 40.7273C3.99559 39.563 3.6075 38.5546 2.83131 37.7112C2.05513 36.8587 1.11136 36.4095 0 36.3545ZM56.8313 24.0069C56.0551 24.8503 55.1114 25.2995 54 25.3545C55.1114 25.4095 56.0551 25.8587 56.8313 26.7112C57.6075 27.5546 57.9956 28.563 57.9956 29.7273C57.9956 28.9572 58.172 28.2513 58.5248 27.5913C58.8864 26.9312 59.3716 26.3995 59.9802 26.0053C60.5976 25.602 61.2679 25.3911 62 25.3545C60.8798 25.2903 59.9361 24.8503 59.1599 24.0069C58.3837 23.1635 57.9956 22.1642 57.9956 21C57.9956 22.1642 57.6075 23.1635 56.8313 24.0069ZM81 25.3545C82.1114 25.2995 83.0551 24.8503 83.8313 24.0069C84.6075 23.1635 84.9956 22.1642 84.9956 21C84.9956 22.1642 85.3837 23.1635 86.1599 24.0069C86.9361 24.8503 87.8798 25.2903 89 25.3545C88.2679 25.3911 87.5976 25.602 86.9802 26.0053C86.3716 26.3995 85.8864 26.9312 85.5248 27.5913C85.172 28.2513 84.9956 28.9572 84.9956 29.7273C84.9956 28.563 84.6075 27.5546 83.8313 26.7112C83.0551 25.8587 82.1114 25.4095 81 25.3545ZM136 36.3545C137.111 36.2995 138.055 35.8503 138.831 35.0069C139.607 34.1635 139.996 33.1642 139.996 32C139.996 33.1642 140.384 34.1635 141.16 35.0069C141.936 35.8503 142.88 36.2903 144 36.3545C143.268 36.3911 142.598 36.602 141.98 37.0053C141.372 37.3995 140.886 37.9312 140.525 38.5913C140.172 39.2513 139.996 39.9572 139.996 40.7273C139.996 39.563 139.607 38.5546 138.831 37.7112C138.055 36.8587 137.111 36.4095 136 36.3545ZM101.831 49.0069C101.055 49.8503 100.111 50.2995 99 50.3545C100.111 50.4095 101.055 50.8587 101.831 51.7112C102.607 52.5546 102.996 53.563 102.996 54.7273C102.996 53.9572 103.172 53.2513 103.525 52.5913C103.886 51.9312 104.372 51.3995 104.98 51.0053C105.598 50.602 106.268 50.3911 107 50.3545C105.88 50.2903 104.936 49.8503 104.16 49.0069C103.384 48.1635 102.996 47.1642 102.996 46C102.996 47.1642 102.607 48.1635 101.831 49.0069Z"
              fill="currentColor"
            ></path>
          </svg>
        </div>
        <div class="theme-switch__circle-container">
          <div class="theme-switch__sun-moon-container">
            <div class="theme-switch__moon">
              <div class="theme-switch__spot"></div>
              <div class="theme-switch__spot"></div>
              <div class="theme-switch__spot"></div>
            </div>
          </div>
        </div>
      </div>
    </label>

    <div>
      受自终母收胜为被土，落死到他司落世使，人尤应皇乌书不争是受我，外何见书轻中养备学，法当夹笔当也不斯者章倒不非望何所受恨斯，人救大的终老勇身，五县领密为尘孔因区，才这新俭，以第归负五尽家联杨，极挟下责可到对郭到哉，三特己国天行釜耳汪己夫外国整马才过投，德徨罪婵，是落则他的的谋正饮你，郭的卡才孔胆慧回书，全报吾哉竟，个的此落普极快藏文，灰胜何过锐当一车用太没第珍二子，的有主亲看人为那脱书帅流，锐何挟收牛吾上娘夭老弟国，尝力人要三使起救要，的冈孔月大一的日承德皇韩起此非见陀知量，上后皮母至她看赏那人评，若一沉的耳可文仁秦会则耐，珍语而，量惜几目不留必也得陛活此治洪衣第圣作嗣，促大如逃今放君榜则而学别劝，十承王，帝他不之范不况帮欲次人位憾故也，生登问养者只而意间光量承来为事元，禀了才服友救反极答仍，者予专玉和唯是到气若宋不，是了卡尝，太语人高三小新死德廿因恩仑娟木大，苦次后举助你会绪何下如而范护一吾，我郭在恨仆舟之后同，第办夫恩也国有至但呼望竟白，中彷韩君了韩不人死以夹回知，瞠一仁快见作我九，非杨判尝，叩第承你小勇年，事在耐法后放，自极罚，在之分我的向特国负承得沾则用看仆谓，定气老才王郭山脱了养能，成过水禀杨的快作反在，之破临着上，褒如张你张了行，重苦极未且是是后，畴破我鼓珍是保薪但禀的上十德念留，洞相不，辜孔同之畴思好人马览葬设者绪订倒逃珍，没他力对非九彷皇，位沫虽之是妙听洪过失快作，尝中得程融知了种事用性，密我负哉马把下斯之投斯我李宋壬陀讨孔，一哥妄会书，老特法谭收非肯揽就要喜那郭明仄人我，掉欲郭杨才师得斯人骂罚间日也馆唯，者主修样满人四等，略土家，系君有，这份皮太秦是变的新今望之韩洪，王高姑临牛躲自老为几月导，生云落，承同的惊谢不书奔他制谓，说若虑收曾，德少尘定冒血日，杨要宋来爱沉心，徒慧天读那褒放书文光落原有是贼陀锐，事之说药不弄事他，落上锐人，竟只才以法死，不接台不小尘人讨才弟同恩贤足今不如骂，对赠洪否解会人逃甲尤这日的，未订官了了希选感松，人他力用才，自有反后绛护日几皇志为愚都便大此预得，国作下回往之魂人临其，外并成文的了马为下归在锐谋同量当接，土不这已终才身是龄了完丰这元求辜预在，招王仆着挟人了吴对诗鲜搏常不将，以牛而逝又掉之衣宋，欲纯大说畴，曰有婵气，锐卡竟，家主互他韩通足又判，韩自但太谓自留非往们挟登招啦人，求评极君韩他感谓恼陛到求领他李藏，汪为仆将不斯唯嗣耳罪天才，主其友同人你哥文定化木，尹学归用可爱此褒耐娘名大太中着，畴的金娟仑并仅皇老春生本是事人是，于是生道盲回畴三法，她你郭，老治宋相人尝国同这了人意前要范流得虑，明主被第可承沫是自之秦愚韩朗畴，低肯拢事了就极一不，九井这虽故间谢梵种仁法与预上投设选受魂，此说令韩能中讨关搏，其互找哥后之足商大，下请次为则乌音评如高处方郭有更，郭逃归生落，杨啦朋花一活国将上目若是策让资见是国，国人上老入辜才，君斗留、也场有只不风判仍第谋则，张快谋到持承承者到血起己落俭死吞他洞婵，自法了韩的感帝貂主么自，我蒲们，生杂屯，洋种郭愚的瞠句县能，看会章非自商老宋支，俭意绪有选帅能韩灰，不起者，争文家惜得人兼是招纯三罪，卡德竟别便价到登娇否哉变越，并心后笔，着陀不安逝偶魂范够千九皇张，馆火招对，亡着吴最哉他应等惊后变次，逃即惜张有清竟看的成才快得貂褒若付是，笔匹许你杂见后世反沾的京，者最严是笔壬斯，里了我者领以君藏情，创恼即商能价应法的范们未第，玉有千说通知服救找反书而不而足得失，衣的小了向足，救孔老的说洪位商终，投魂派褒书，主沾无的，落所风上六他明对了，皇土年区会希，上事派因别他上畴辜他挟得上要意则，千谓太要新即十升游不韩着同明，藏文由这，次位订罪艳回此司小人，者倒有司月会谋谓的千一知上，不他请评明禀，侯人惊论韩上宫罚生但娘怒月应劫感承人，关化韩，劝贤为姑唯策奔作连归自冷，韩考没人杨，慨小互郭不只沫，人天我玉张娟秦劫负逃所将策朗，你诗为无有用得国斗秦洪明卞才给，感评这，的升哥尽非大报耳大牙珍不，月高不，是日尚变就但韩竟榜而子原娇两，妄王他以人子足张感策尘的姑得互子，德未十尺愚，会用量人，普卅意有么事历了耐处有贤未评变木又了，褒人在李白得不与斗了拾才开作病，十关生老就仍慷得姑哉先，也感投哉决君弟地韩疾定文览书尝韩词，志他的，杀定冷快请为程洞之才未哉肯、，大投可惜区如太无普皇升巴，路的能训蒲，千间恨骨意开韩是欲时王，只家恩评商派出孔是金承说位，人幕的我终竟如若，韩正我方韩一而能太褒到论们，给少联谓人谢最将使，不用家准，老应那洪下，一彷得快先首丑畴太而，挟后答把是，中曾没介慷娇杀，留光从览罚斗的火学许人活乌国第，互妄何孔通掸人作死绪过有嗣教罪锐有小兼，国斗的望人回绪是逃会作了回，打为畴读张燕玉文曾够啦，此夹令留穿可台我定居，天便人司沫丑资后夭失洞如徨希，变只劝白订永未了回尘到的战太，都韩鲜变。
    </div>

    <div style="position: absolute; left: 400px; top: 50%; width: 40%;">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus, aliquam porro. Obcaecati qui at rerum architecto porro repellat, voluptatibus, voluptates quidem nesciunt adipisci sit minus error numquam doloremque, officiis optio.
      Inventore incidunt quibusdam, debitis dolores cupiditate repellat a sit quia cum voluptate sed dolorem omnis provident molestias deleniti voluptates vitae, ratione quae. Alias quasi iste, quas recusandae impedit quidem maiores.
      Eaque fugit excepturi ratione nulla. Necessitatibus corporis officiis voluptatibus minima culpa eius quidem quod at quam eligendi ducimus, magnam accusamus aliquam, similique maxime, qui optio ea sed beatae repudiandae voluptatum!
      Exercitationem commodi qui reprehenderit quibusdam inventore vero architecto, eaque cupiditate facere et consequuntur vel dolore natus labore quidem illum blanditiis, perferendis dignissimos dolorem praesentium impedit ex ratione? Dicta, nihil deserunt?
      Velit, fugiat. Id aliquid quam inventore doloribus! Qui ratione quibusdam itaque dolorum sunt quam aspernatur sequi officia. Libero suscipit consequatur asperiores illum aperiam, deleniti numquam enim officia veritatis fugit nam.
      Quisquam, quo illo. Quos voluptate commodi ad deleniti consequuntur perferendis quia necessitatibus delectus. Quaerat cupiditate iure eaque. Commodi porro minus beatae, dolorum voluptas fugiat? Cum saepe explicabo ea blanditiis non!
      Beatae modi quas laborum autem possimus illo itaque maiores, at eaque saepe. Sed eaque incidunt quisquam. Sapiente tenetur, aliquid modi fuga, accusamus voluptas, voluptatibus tempora autem eaque sit omnis libero.
      Possimus aliquam ducimus sunt molestiae illum, eaque aspernatur unde fugiat iste consectetur adipisci, dolores blanditiis obcaecati quia enim molestias repellat ab cupiditate tenetur modi tempore veniam neque nemo. Fuga, sunt!
      Sed aliquam architecto temporibus, deserunt voluptas fuga aperiam expedita ipsum libero, a harum optio itaque, laudantium quasi molestias nihil fugiat! Et, aspernatur adipisci eligendi quam repudiandae eum similique! Blanditiis, quam.
      At eum, quasi inventore eligendi modi cumque quam aliquid veritatis sunt maxime voluptatum, dicta a. Perferendis architecto nulla ullam facilis ipsum blanditiis, fuga incidunt minus, voluptate cupiditate assumenda dolorem consequatur.
    </div>

    <script>
      const btn = document.getElementById("btn");
      const isDark = Array.from(document.documentElement.classList).includes("dark");
      btn.checked = isDark
      btn.addEventListener("click", (e) => {
        const transition = document.startViewTransition(() => {
          document.documentElement.classList.toggle("dark");
        });

        const x = e.clientX;
        const y = e.clientY;

        const tragetRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));

        const clipPath = [`circle(0% at ${x}px ${y}px)`, `circle(${tragetRadius}px at ${x}px ${y}px)`]
        transition.ready.then(() => {
          document.documentElement.animate(
            {
              clipPath: clipPath,
            },
            {
              duration: 400,
              pseudoElement: "::view-transition-new(root)",
              easing: "ease-in",
            }
          );
        });
      });
    </script>
  </body>
</html>
